<template>
  <div class="container">
    <a-row style="margin: 16px 0">
      <a-col :span="24">
        <a-card>
          <a-calendar>
            <template #default="{ year, month, date }">
              <div class="arco-calendar-date">
                <div class="arco-calendar-date-value">
                  <div
                    v-if="isToday(year, month, date)"
                    class="calendar-date-circle arco-calendar-date-circle"
                  >
                    {{ date }}
                  </div>
                  <div v-else class="calendar-date-circle">
                    {{ date }}
                  </div>
                </div>
                <div class="calendar-date-circle">
                  <div
                    v-if="!isFutureDate(year, month, date)"
                    style="justify-content: center; text-align: center"
                  >
                    {{ isSignedDate(year, month, date) ? '✔️' : '❌' }}
                  </div>
                </div>
              </div>
            </template>
          </a-calendar>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import { listMyUserSignVoByPageUsingPost } from '@/service/backend/userSignController.ts';
import { Message } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';

const signData = ref<API.UserSignVO[]>([]);

const loadData = async () => {
  try {
    const res = await listMyUserSignVoByPageUsingPost({});
    if (res.data && res.code === 0) {
      signData.value = res.data.records;
    }
  } catch (e: any) {
    Message.error(e.message);
  }
};

const isToday = (year: number, month: number, date: number) => {
  const today = dayjs();
  return (
    date.toString() === today.format('DD') &&
    year.toString() === today.format('YYYY') &&
    month.toString() === today.format('MM')
  );
};

const isSignedDate = (year: number, month: number, date: number) => {
  // 修正月份处理，因为 dayjs 中月份是从 0 开始的
  const currentDate = dayjs(
    `${year}-${String(month).padStart(2, '0')}-${String(date).padStart(2, '0')}`
  ).format('YYYY-MM-DD');
  const signInDates =
    signData.value.map(item => {
      // 确保使用本地时间
      return dayjs(item.signTime).format('YYYY-MM-DD');
    }) || [];
  return signInDates.includes(currentDate);
};

const isFutureDate = (year: number, month: number, date: number) => {
  const current = dayjs(`${year}-${month}-${date}`);
  return current.isAfter(dayjs(), 'day');
};

onMounted(async () => {
  await loadData();
});
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px;
}

.arco-calendar-date {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
}

.arco-calendar-date-value {
  color: var(--color-text-1);
  font-weight: 500;
  font-size: 16px;
}

.calendar-date-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.arco-calendar-date-circle {
  box-sizing: border-box;
  border: 1px solid rgb(var(--primary-6));
}

.arco-calendar-date-circle-select {
  box-sizing: border-box;
  color: #fff;
  background-color: rgb(var(--primary-6));
  border: 1px solid rgb(var(--primary-6));
}
</style>
